<template>
	<div class="chat-msg-item">
		<!-- 撤回消息 -->
		<div v-if="isRecalled" class="chat-msg-tip">
			您的消息已撤回
		</div>
		<!-- 时间显示 -->
		<div class="chat-msg-tip" style="text-align: center;color: #a5a5a5;">
			{{ msgInfo.sendTime }}
		</div>
		<div :class="['chat-msg-normal', { 'chat-msg-mine': isUserMessage }]">
		
			<head-image :name="msgInfo.senderPin" :url="user.headImage" :online="user.online"></head-image>
			<div class="chat-msg-content">
				<div class="chat-msg-top">
					<span>{{ msgInfo.sender }}</span>
				</div>
				<div class="chat-msg-bottom">
					<div class="chat-msg-text">
						<div v-if="msgInfo.title" style="font-size: 17px;font-weight: 700;">
							标题： {{ msgInfo.title }}
						</div>
						<div v-if="msgInfo.content"
							:style="{ padding: msgInfo.fileSendList && msgInfo.fileSendList.length > 0 ? '15px' : '' }">
							{{ msgInfo.content }}
						</div>
						<!-- 文件 -->
						<div v-if="msgInfo.fileSendList && msgInfo.fileSendList.length > 0" class="chat-msg-file">
							<!-- 上部分：文件图标和信息 -->
							<div class="chat-file-box" v-for="(file, index) in msgInfo.fileSendList" :key="index">
								<div class="chat-file-info">
									<div class="chat-file-icon">
										<span class="el-icon-document"></span>
									</div>
									<div class="chat-file-details">
										<!-- 文件链接 -->
										<a :href="file.urlPath" class="chat-file-name" target="_blank">{{ file.originalName }}</a>
										<!-- 文件大小 -->
										<div class="chat-file-size">{{ formatFileSize(file.fileSize) }}</div>
									</div>

								</div>
								<!-- 中间分割线 -->
								<div class="chat-file-divider"></div>
								<!-- 下部分：按钮 -->
								<div class="chat-file-buttons">
									<el-button class="chat-file-btn" :disabled="!file.enablePreview"
										@click="previewFile(file)">预览</el-button>
									<el-button class="chat-file-btn" :disabled="!file.enableDownload"
										@click="downloadFile(file)">下载</el-button>
									<el-button class="chat-file-btn" :disabled="!file.enablePrint">打印</el-button>
								</div>
							</div>
						</div>
					</div>
					<div v-if="msgInfo.image" class="chat-msg-image">
						<div class="img-load-box">
							<img :src="msgInfo.image" alt="Image" loading="lazy" />
						</div>
						<span v-if="msgInfo.sendFail" class="send-fail el-icon-warning" title="发送失败"></span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import HeadImage from '../HeadImage.vue';

export default {
	components: { HeadImage },

	data () {
		return {
			isRecalled: false,
			user: {
				name: '',
				avatar: require('../../assets/common/portrait.jpeg')
			},
		};
	},
	props: {
		msgInfo: { type: Object, }
	},
	computed: {
		isUserMessage () {
			const storedUserPin = sessionStorage.getItem('userPin'); // 获取存储的 userPin
			return storedUserPin === this.msgInfo.senderPin; // 比较 userPin 和 senderPin
		},
	},
	created () {

	},
	methods: {
		previewFile (file) {
			console.log(file);
			const fileUrl = file.urlPath;
			// 预览文件的逻辑，可能是跳转到文件的预览页面或者显示预览视图
			window.open(fileUrl, '_blank');
		},
		formatFileSize (size) {
			if (size < 1024) return `${size} B`;
			else if (size < 1048576) return `${(size / 1024).toFixed(2)} KB`;
			else if (size < 1073741824) return `${(size / 1048576).toFixed(2)} MB`;
			else return `${(size / 1073741824).toFixed(2)} GB`;
		},
		downloadFile (file) {
			const fileUrl = file.urlPath;
			// 下载文件的逻辑
			const a = document.createElement('a');
			a.href = fileUrl;
			a.download = file.originalName; // 设置下载文件名
			a.click();
		},
	}
};
</script>


<style lang="scss">
.chat-file-buttons {
	display: flex;
	justify-content: space-around;
}

.chat-file-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.chat-file-icon {
	font-size: 40px !important;
	color: #fff;
}

.chat-file-details {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 15px;
}

.chat-file-name {
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}

.chat-file-size {
	font-size: 12px;
	display: flex;
	/* 使用 flexbox */
	justify-content: flex-end;
	/* 将内容左右对齐 */
	align-items: center;
	/* 垂直居中对齐 */
	width: 100%;
}


.chat-file-btn {
	background-color: #fff;
	color: rgba(73, 164, 255, 1);
	border: none;
	padding: 6px 12px;
	margin: 5px;
	font-size: 12px;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

// .chat-file-btn:hover {
// 	background-color: rgba(73, 164, 255, 0.1);
// }

.chat-file-btn:focus {
	outline: none;
}

.head-image {
	margin-right: 10px;

	.img {
		width: 38px;
		height: 38px;
		background-color: rgb(199, 81, 90);
		font-size: 13.3px;
		border-radius: 50%;
	}
}

.chat-msg-item {

	.chat-msg-tip {
		line-height: 50px;
		font-size: 14px;
	}

	.chat-msg-normal {
		position: relative;
		font-size: 0;
		padding-left: 60px;
		min-height: 50px;
		margin-top: 10px;

		.head-image {
			position: absolute;
			width: 40px;
			height: 40px;
			top: 0;
			left: 0;
		}

		.chat-msg-content {
			text-align: left;

			.send-fail {
				color: #e60c0c;
				font-size: 30px;
				cursor: pointer;
				margin: 0 20px;
			}

			.chat-msg-top {
				display: flex;
				flex-wrap: nowrap;
				color: #333;
				font-size: 14px;
				line-height: 20px;

				span {
					margin-right: 12px;
				}
			}

			.chat-msg-bottom {
				display: inline-block;
				padding-right: 300px;

				.chat-msg-text {
					display: block;
					position: relative;
					line-height: 26px;
					margin-top: 3px;
					padding: 7px;
					background-color: #eee;
					border-radius: 10px;
					color: black;
					display: block;
					font-size: 14px;
					text-align: left;
					white-space: pre-wrap;
					word-break: break-all;

					&:after {
						content: "";
						position: absolute;
						left: -10px;
						top: 13px;
						z-index: -1;
						width: 0;
						height: 0;
						border-style: solid dashed dashed;
						border-color: #eee transparent transparent;
						overflow: hidden;
						border-width: 10px;
					}
				}

				.chat-msg-image {
					display: flex;
					flex-wrap: nowrap;
					flex-direction: row;
					align-items: center;

					.send-image {
						min-width: 200px;
						min-height: 150px;
						max-width: 400px;
						max-height: 300px;
						border: #dddddd solid 1px;
						border: 5px solid #ccc;
						border-radius: 6px;
						cursor: pointer;
					}

				}

				.chat-msg-file {
					padding-bottom: 5px;

					.chat-file-box {
						background-color: rgb(128 133 139);
						display: flex;
						min-height: 80px;
						flex-direction: column;
						gap: 10px;
						border-radius: 6px;
						padding: 10px 15px;
						margin-bottom: 15px;

						.chat-file-info {
							flex: 1;
							height: 100%;
							text-align: left;
							font-size: 14px;

							.chat-file-name {
								display: inline-block;
								min-width: 250px;
								max-width: 500px;
								font-size: 16px;
								font-weight: 600;
								// margin-bottom: 15px;
								white-space: pre-wrap;
								word-break: break-all;
							}
						}


						.chat-file-divider {
							height: 2px;
							width: 100%;
							background-color: #ddd;
							/* 灰色线 */
							margin: 10px 0;
						}

						.chat-file-icon {
							font-size: 50px;
							color: #d42e07;
						}
					}

					.send-fail {
						color: #e60c0c;
						font-size: 30px;
						cursor: pointer;
						margin: 0 20px;
					}

				}

				.chat-msg-voice {
					font-size: 14px;
					cursor: pointer;

					audio {
						height: 45px;
						padding: 5px 0;
					}
				}

				.chat-action {
					display: flex;
					align-items: center;

					.iconfont {
						cursor: pointer;
						font-size: 22px;
						padding-right: 8px;
					}
				}

				.chat-msg-status {
					display: block;

					.chat-readed {
						font-size: 12px;
						color: #888;
						font-weight: 600;
					}

					.chat-unread {
						font-size: 12px;
						color: #f23c0f;
						font-weight: 600;
					}
				}

				.chat-receipt {
					font-size: 13px;
					color: blue;
					cursor: pointer;

					.icon-ok {
						font-size: 20px;
						color: #329432;
					}
				}

				.chat-at-user {
					padding: 2px 5px;
					border-radius: 3px;
					font-weight: 600;
					cursor: pointer;
				}
			}
		}


		&.chat-msg-mine {
			text-align: right;
			padding-left: 0;
			padding-right: 60px;

			.head-image {
				left: auto;
				right: 0;
			}

			.chat-msg-content {
				text-align: right;

				.chat-msg-top {
					flex-direction: row-reverse;

					span {
						margin-left: 12px;
						margin-right: 0;
					}
				}

				.chat-msg-bottom {
					padding-left: 180px;
					padding-right: 0;

					.chat-msg-text {
						margin-left: 10px;
						background-color: rgb(88, 127, 240);
						color: #fff;
						vertical-align: top;

						&:after {
							left: auto;
							right: -10px;
							border-top-color: rgb(88, 127, 240);
						}
					}

					.chat-msg-image {
						flex-direction: row-reverse;
					}

					.chat-file-box {
						background-color: rgb(37 80 202);
						;
					}

					.chat-file-name {
						color: #fff;
					}

					.chat-file-size {
						color: #fff;
					}

					.chat-action {
						flex-direction: row-reverse;

						.iconfont {
							transform: rotateY(180deg);
						}
					}
				}
			}
		}

	}
}
</style>